<template>
  <div class="block">
    <div class="banner-bg" :style="{ 'background-image': bgColor }"></div>
    <el-carousel
      @change="changeCard"
      trigger="click"
      height="150px"
      :initial-index="initialIndex"
    >
      <el-carousel-item v-for="(item, index) in items" :key="index">
        <img class="slide-img" :src="item.image" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { colorRGB2Hex, gradientColors } from "./utils/color";

export default defineComponent({
  name: "App",
  data() {
    return {
      items: [
        {
          image: "https://eftcdn.exexm.com/semlinker/landscape-5426755_1920.jpg",
          imageRgb: "",
          startRgb: "",
          endRgba: "",
          gradientColor: [],
          lightNess: null,
        },
        {
          image: "https://eftcdn.exexm.com/semlinker/ab93a91f92b2e835f3cd0748076c3f0.jpg",
          imageRgb: "",
          startRgb: "",
          endRgba: "",
          gradientColor: [],
          lightNess: null,
        },
        {
          image: "https://eftcdn.exexm.com/semlinker/bremen-6557996_1920.jpg",
          imageRgb: "",
          startRgb: "",
          endRgba: "",
          gradientColor: [],
          lightNess: null,
        },
        {
          image: "https://eftcdn.exexm.com/semlinker/f8d0e29853b10b7cb3b1e3d3175ba80.jpg",
          imageRgb: "",
          startRgb: "",
          endRgba: "",
          gradientColor: [],
          lightNess: null,
        },
      ],
      initialIndex: 0,
      bgColor: "none",
    };
  },
  mounted() {
    this.items.forEach((item, index) => {
      fetch(`${item.image}?imageAve`)
        .then((response) => response.json())
        .then((data) => {
          item.imageRgb = data.RGB;
          const bannerBgColor = item.imageRgb.slice(2, 8);
          const nextBannerBgColor =
            index === this.items.length - 1
              ? this.items[0].imageRgb.slice(2, 8)
              : this.items[index + 1].imageRgb.slice(2, 8);
          item.startRgb = colorRGB2Hex(`#${bannerBgColor}`);
          item.endRgba = colorRGB2Hex(`#${bannerBgColor}`, 0.8);
          item.gradientColor = gradientColors(
            `#${bannerBgColor}`,
            `#${nextBannerBgColor}`,
            5
          );
          const rgbArr = colorRGB2Hex(`#${bannerBgColor}`, null, true);
          item.lightNess =
            (rgbArr[0] * 0.2126 + rgbArr[1] * 0.7152 + rgbArr[2] * 0.0722) /
            255;
          if (this.initialIndex === index) {
            this.bgColor = `linear-gradient(-180deg, ${
              this.items[this.initialIndex].startRgb
            } 20%, ${this.items[this.initialIndex].endRgba} 98%)`;
          }
        });
    });
  },
  methods: {
    changeCard(index) {
      this.bgColor = `linear-gradient(-180deg, ${this.items[index].startRgb} 20%, ${this.items[index].endRgba} 98%)`;
    },
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 40px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.banner-bg {
  position: absolute;
  width: 100%;
  height: 160px;
  left: 0;
  top: 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: linear-gradient(-180deg, #fff 0%, #fff 98%);
  z-index: -1;
  box-sizing: content-box;
}

.slide-img {
  width: 100%;
  height: 150px;
  border-radius: 10px;
}
</style>
